<template>
	<view class="content">
		<view class="book">
			<view class="thumbnail">
				<image src="../../static/3.jpg" mode="widthFix" class="img"></image>
			</view>
			<view class="detail">
				<view class="hd">
					混合ＡＰＰ开发
				</view>
				<view class="text">
					Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque nihil reprehenderit fugit suscipit
					molestiae, doloribus consequatur eum vel, quam iste officiis? Placeat, deserunt ea vitae nostrum
					delectus recusandae atque ut.
				</view>
			</view>
		</view>
		<view class="link">
			<navigator url="../detail/detail">查看详情</navigator>
		</view>
	</view>
</template>

<script>
	import {
		ref
	} from 'vue'
	export default {
		setup() {

		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.book {
		display: flex;
		flex-flow: row nowrap;
		align-items: flex-start;
	}

	.thumbnail {
		flex: 1;
		vertical-align: top;
	}

	.img {
		width: 100%;
	}

	.detail {
		flex: 3;
	}

	.hd {
		display: block;
		font-weight: bold;
	}

	.text {
		display: block;
		line-height: 1.7em;
	}
	
	.link
	{
		width: 100%;
		text-align: right;
		padding-right: 100rpx;
	}
</style>
